<template>
  <el-form label-width="100px" inline>
    <el-form-item label="1.章节名称:" :required="true" style="display: block">
      <el-input
        v-model="form.name"
        style="width: 266px"
        class="input"
        placeholder="输入章节名称"
      />
    </el-form-item>
    <el-form-item :required="true">
      <span slot="label">2.章节封面:<br>(266 X 200)</span>
      <uploader
        :url="form.page_url"
        @callback="pageCallback"
      />
    </el-form-item>
    <el-form-item :required="true">
      <span slot="label">3.学习地图:<br>(960 X 600)</span>
      <uploader
        :url="form.map_url"
        @callback="mapCallback"
      />
    </el-form-item>
    <el-form-item label="4.关卡坐标:" :required="true" style="display: block">
      <el-input
        v-model="form.points"
        style="width: 266px"
        type="textarea"
        :rows="4"
        placeholder="请关卡坐标"
      />
    </el-form-item>
    <el-form-item>
      <el-button style="margin-left:100px;width: 100px" @click="() => { this.$emit('close') }">取消</el-button>
      <el-button v-if="mode" style="width: 150px" type="primary" @click="update">更新章节</el-button>
      <el-button v-else style="width: 150px" type="primary" @click="create">创建章节</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { createChapter, updateChapter } from '../../../api/chapter'
import Uploader from './Upload'
export default {
  name: 'ChapterDialog',
  components: { Uploader },
  props: {
    form: {
      type: Object,
      default: function() {
        return {
          id: null,
          name: '',
          page_url: '',
          map_url: '',
          points: ''
        }
      }
    },
    total: {
      type: Number,
      default: null
    },
    series: {
      type: Number,
      default: null
    },
    mode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  methods: {
    pageCallback(url) {
      this.form.page_url = url
    },
    mapCallback(url) {
      this.form.map_url = url
    },
    create() {
      const config = this.form
      config['series'] = this.series
      config['total'] = this.total
      createChapter(config).then(() => {
        this.$SUCCESS('章节创建成功')
        this.$close()
        this.$reload()
      }).catch(() => {
        this.$ERROR('章节创建失败')
      })
    },
    update() {
      updateChapter(this.form).then(() => {
        this.$SUCCESS('章节更新成功')
        this.$close()
        this.$reload()
      }).catch(() => {
        this.$ERROR('章节更新失败')
      })
    }
  }
}
</script>

<style scoped>
    .upload{
        height: 200px;
    }
    .upload /deep/ .el-upload {
        width: 266px;
        height: 200px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .upload /deep/ .el-upload:hover {
        border-color: #409EFF;
    }
</style>
